<template>
  <div class="zs-bind">
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%;"
      @expand-change="handleexpand"
    >
      <!-- <el-table-column type="expand" width="30">
        <template slot-scope="scope">
          <div class="xl_layout">
            <div>{{ scope.row.publicKeyData }}</div>
            <div>{{ scope.row.privateKeyData }}</div>
            <div>
              <p>clientId:{{scope.row.clientId}}</p>
              <p>keyId:{{scope.row.keyId}}</p>
              <p>teamId:{{scope.row.teamId}}</p>
            </div>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="证书名称"
        prop="secretName"
        width="150"
      >
      </el-table-column>
      <el-table-column
        label="状态"
        width="150"
      >
        <template slot-scope="scope">
           <!-- <span v-if="scope.row.status===0">未同步</span>
          <span v-else-if="scope.row.status===1">同步中</span>
          <span v-else-if="scope.row.roleName=== 'invalid_client' ">已失效</span>
           <span v-else-if="scope.row.status=== 4  ">货币类型不一致</span>
          <span v-else>已同步</span> -->
          <span v-if="scope.row.roleName=== 'invalid_client' ">已失效</span>
          <span v-else-if="scope.row.status===0">未同步</span>
          <span v-else-if="scope.row.status===1">同步中</span>
          <span v-else-if="scope.row.status=== 2">已同步</span>
          <span v-else-if="scope.row.status=== 3">权限不足</span>
           <span v-else-if="scope.row.status=== 4  ">货币类型不一致</span>
        </template>
      </el-table-column>
      <el-table-column
        label="币种"
        width="120"
      >
       <template slot-scope="scope">
        <span v-if="scope.row.status===0 || scope.row.status===1">-</span>
        <span v-else-if="scope.row.currencyType === 'USD'">美元</span>
        <span v-else>人民币</span>
       </template>
      </el-table-column>
      <el-table-column
        label="Public Key"
        prop="publicKeyData"
      >
      </el-table-column>
      <!-- <el-table-column
        label="Private key"
        width="500"
        prop="privateKeyData"
      >
      </el-table-column> -->
      <el-table-column
        label="ASA API"
      >
      <template slot-scope="scope">
        <p>clientId:{{scope.row.clientId}}</p>
        <p>keyId:{{scope.row.keyId}}</p>
        <p>teamId:{{scope.row.teamId}}</p>
      </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createAt"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="180"
      >
        <template slot-scope="scope">
          <!-- <em v-if="!scope.row.clientId || !scope.row.keyId || !scope.row.teamId" style="cursor: pointer;" @click="goBack(scope.row)">编辑</em> -->
          <em v-if="(scope.row.clientId || scope.row.keyId || scope.row.teamId) && scope.row.status===2 && scope.row.roleName !== 'invalid_client'" style="cursor: pointer;" @click="openOverview(scope.row)">数据概览</em>
          <em v-if="scope.row.clientId || scope.row.keyId || scope.row.teamId" style="cursor: pointer;margin-left:20px;" @click="deletDialog(scope.row)">删除</em>
        </template>
      </el-table-column>
    </el-table>
   <pagination :total="total" @pageSize="changePageSize" @page="changePage"></pagination>
  </div>
</template>

<script>
import {
  delZS
} from '@/api/user.js'
import { findOrgAccountAll, findOrgAll } from '@/api/overView.js'
import pagination from '@/components/elementComponents/pagination.vue'
export default {
  name: 'ZsManager',
  data() {
    return {
      dialogVisible: false,
      data: '',
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10
    }
  },
  // props: {
  //   activeName: String
  // },
  computed: {
   isType() {
      return this.$store.state.user.unit
    },
    teamId() {
      return this.$store.state.team.teamId
    }
 },
  components: {
    pagination
  },
  mounted(){
    this.getZSList()
  },
  watch: {
    page(newV, oldV){
      this.page = newV
      this.getZSList()
    },
    pageSize(newV, oldV){
      this.pageSize = newV
      this.getZSList()
    },
    // activeName:{
    //   immediate: true,
    //   deep: true,
    //   handler:function(newV, oldV) {
    //     if(newV === 'second') {
    //       this.getZSList()
    //     }
    //   }
    // },
    teamId:{
      deep: true,
      handler: function(newV, oldV) {
        this.teamId = newV
        this.getZSList()
      }
    }
    // isType(newV,oldV) {
    //   this.getZSList()
    // }
  },
  methods: {
    // 证书跳转
    goBack(data) {
      this.$emit('changeOpen', 'first')
      this.$store.commit('user/SET_PUBLIC', data)
    },
     // 获取一页数量
    changePageSize(data) {
      this.pageSize = data
    },
    // 获取页数
    changePage(data) {
      this.page = data
    },
    // 跳转数据概览页面
    async openOverview(row) {
      this.$store.commit('user/SET_UNIT',row.currencyType)
      const data = {
       aId: row.aid,
       currencyType: this.isType,
       teamId: this.teamId
      }
      const res = await findOrgAll(data)
      if (res.data.code === 20000) {
        this.$router.push({
          name: 'Overview',
          query:{
            orgId: res.data.data[0].orgId,
            uuid: row.uuid,
            modelType: 'help'
          }
        })
      } else {
        return this.$message.error('跳转失败')
      }

    },
    // 获取证书列表
    async getZSList() {
      let data={
        pageNum: this.page,
        pageSize: this.pageSize,
        currencyType: this.isType,
        teamUid: this.teamId
      }
      const res = await findOrgAccountAll(data)
      if (res.data.code === 20000) {
        res.data.data.list.forEach(item => {
          item.createAt = item.createAt.substring(0,10)
        })
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      } else {
        this.$message.error('获取证书列表失败')
      }
    },
    // 打开删除提示框
    async deletDialog(row) {
      const confirmResult = await this.$confirm('一旦删除将不再同步数据及查看历史信息', '删除证书后将不再同步数据', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'cancel-btn',
        // type: 'warning'
      }).catch(err => err)
      if(confirmResult !== 'confirm') return this.$message.info('已取消删除')
      let data = {
        aId: row.aid,
        uuid: row.uuid,
        teamUid: this.teamId
      }
      const res = await delZS(data)
      if (res.data.code === 20000){
        this.$message.success('删除成功')
        this.getZSList()
      } else if (res.data.code === 20009) {
        this.$message.info('上传未满5分钟')
      } else {
        this.$message.error('删除失败')
      }
    },
    handleexpand(row, expanded) {
      this.data = row
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.xl_layout {
  width: 100%;
  display: flex;
  flex-direction: row;
  div{
    flex: 1;
    color: $assistTextColor4;
    background: #F2F2F2;
    border: 1px solid #D9D9D9;
    border-radius: 4px;
    margin-left: 10px;
  }
}
</style>
